<template>
  <div class="page-container page-footer-btn">
      <van-row>
        <van-col span="24">
          <FortenScan
            ref="scan"
            propPlaceholder="请扫描SN标签"
            propErrorMsg="请扫描正确的SN标签"
            :propTypeArr="['sn']"
            @scanCall="handleScanOver"
          />
        </van-col>
      </van-row>
      <van-collapse v-model="activeNames">
        <van-collapse-item title="库存信息" name="1">
          <van-form  class="cell-small-box" >
            <van-row>
              <van-col span="12">
                <van-field label="耗材"  border v-model="form.matrName" readonly />
              </van-col>
              <van-col span="12">
                <van-field label="SN"   border v-model="form.sn"  readonly/>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12">
                <van-field label="仓库"   border v-model="form.warehouseName"  readonly/>
              </van-col>
              <van-col span="12">
                <van-field label="库位"   border v-model="form.locationName"  readonly/>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12">
                <van-field label="品规"  border v-model="form.spec" readonly/>
              </van-col>
              <van-col span="12">
                <van-field label="批次"  border v-model="form.lot" readonly/>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12" >
                <van-field label="生产日期"   border v-model="form.mfgDate" label-width="70" readonly/>
              </van-col>
              <van-col span="12">
                <van-field label="有效期"   border v-model="form.expDate" label-width="70" readonly/>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12">
                <van-field label="当前包装单位"  border v-model="form.packageUnit" label-width="100" readonly/>
              </van-col>
              <van-col span="12">
                <van-field label="当前内含数"   border v-model="form.skuQty"  label-width="100"  readonly/>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12">
                <van-field label="新包装"  border v-model="form.packageProcess"  label-width="60" readonly>
                  <template #button>
                    <van-button plain type="primary" size="mini" @click="selectVisible = true" v-show="form.submitStatus == 0">选择</van-button>
                  </template>
                </van-field>
              </van-col>
              <van-col span="12">
                <van-field label="新包装内含数"   border v-model="form.processRate"  label-width="100"  readonly/>
              </van-col>
            </van-row>
          </van-form>
        </van-collapse-item>
      </van-collapse>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="拆分信息" name="2" v-if="showSnInfo">
        <!--选择工位-->
        <FortenList ref="listItem" :propAutoFetchData = 'false'
                    :propNoCheck ='true'
                    propUrl="/wm/stock_process_item/page"
        >
          <template  #default="{item,index}"  >
            <van-row >
              <van-col span="4">{{index+1}}：</van-col>
              <van-col span="20">{{item.sn}}</van-col>
            </van-row>
          </template>

        </FortenList>
      </van-collapse-item>
    </van-collapse>

    <van-row type="flex" justify="space-around" class="footer-btn"  gutter="12"  >
      <van-col span="6">
        <van-button  type="primary" block @click="handleSubmit(1)" :disabled="form.submitStatus != 0">
          加工
        </van-button>
      </van-col>
      <van-col span="6">
        <van-button type="info" block @click="handleShelf()" :disabled="form.submitStatus != 0">
          提交&上架
        </van-button>
      </van-col>
      <van-col span="6">
        <van-button type="info" block @click="utilPrint.print('snprocess',form.id )" :disabled="form.submitStatus != 1">
          打印标签
        </van-button>
      </van-col>

      <van-col span="6">
        <van-button type="danger" block @click="handleUnSubmit(3)" :disabled="form.submitStatus != 1">
          取消拆分
        </van-button>
      </van-col>
    </van-row>


   <!-- 包装选择-->
    <van-popup position="bottom" closeable v-model="selectVisible" >
      <van-radio-group  v-model="form.packageProcess" style="margin-top: 40px;">
        <van-cell-group>
          <van-cell @click="selectChange(item)" v-for="item in matrUnits" :key="item.id" :title="item.unit" clickable >
            <template #right-icon>
              <van-radio :name="item.id" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
  </div>
</template>
<script>
import { Card } from 'vant'
import barcodeParse from '@/util/barcodeParse.js'

export default {
  data() {
    return {
      scan: '',
      form: {},
      matrUnits: [],
      selectVisible: false,
      showSnInfo: false,
      //所选择的新包装
      packageUnitNew: {},
      stockProcessItem: [],
      activeNames: ['1', '2'],
      processType: 1
    }
  },
  props: {
    propFlowKey: String
  },
  components: {
    Card
  },
  methods: {
    //扫描
    handleScanOver(scanValue) {
      let params = {
        sn: scanValue,
        processType: this.processType,
        isScan: 1
      }
      this.utils.loadShow()
      this.$ajax.get('/wm/stock_process/barCodeScan', {params}).then(resp => {
        console.log('resp.data', resp.data)
        this.utils.loadHide()
        if (resp.code == 0) {
          this.form = resp.data
          this.form.submitStatus = 0
          this.getMatrUnits()
          this.selectVisible = true
        }
      })
    },

    //获取包装单位
    getMatrUnits() {
      this.$ajax.get('/base/matrUnit/getByMatr', {params: {matrId: this.form.matrId}}).then(resp => {
        if (resp.code == 0) {
          this.matrUnits = resp.data
          //排除当前包装单位,比率小于当前内含数，并且当前内含数/包装比率为整数
          this.matrUnits = this.matrUnits.filter(unit => unit.unit != this.form.packageUnit  && unit.rate <= this.form.skuQty && this.form.skuQty % unit.rate == 0)
          if (!this.matrUnits || this.matrUnits.length < 1) {
            this.$notify.warning('当前耗材没有可拆分包装单位')
          } else {
            // this.selectChange(this.matrUnits[this.matrUnits.length - 1])
          }
        }
      })
    },

    //包装单位选择后
    selectChange(unitSelect) {
      console.log('unitSelect', unitSelect)
      this.selectVisible = false
      let unit = this.matrUnits.find(item => item.id == unitSelect.id)
      this.form.packageProcess = unit.unit
      this.form.processRate = unit.rate
      this.form.processQty = this.form.skuQty / this.form.processRate
      // this.form.skuQty = unit.rate
      this.handleProcess()
      this.showSnInfo = true
    },

    //按钮操作
    btnHandle() {
      this.$store.commit('SET_WORKBENCH_ROUTE', { name: 'app_center_package2' })
    },

    //拆分操作
    handleProcess() {
      this.form.processType = this.processType
      this.utils.loadShow()
      let formParam = this.utils.jsonClone(this.form)
      // formParam.skuQty = this.form.processRate
      this.$ajax.post('/wm/stock_process/process', formParam).then(resp => {
        if (resp.code == 0) {
          this.$notify.success('拆分成功')
          this.form.id = resp.data.id
          this.form.locationId = resp.data.locationId
          this.form.locationName = resp.data.locationName
          this.form.locationIdcode = resp.data.locationIdcode
          this.getStockProcessItem()
        }
        this.utils.loadHide()
      })
    },
    //查询加工单明细
    getStockProcessItem() {
      let wrapper = this.$newWrapper().eq('processId', this.form.id ? this.form.id : -1)
      console.log(this.form.id)
      this.$refs.listItem.setQueryWrapper(wrapper)
      // this.$ajax.get('/wm/stock_process_item/list', {params}).then(resp => {
      //   if (resp.code == 0) {
      //     this.stockProcessItem = resp.data
      //   }
      // })
    },
    //提交
    handleSubmit() {
      this.form.processType = this.processType
      this.utils.loadShow()
      this.$ajax.post('/wm/stock_process/submit', this.form).then(resp => {
        if (resp.code == 0) {
          this.$notify.success('拆分成功')
          this.form.submitStatus = 1
        }
        this.utils.loadHide()
      })
    },
    //上架
    handleShelf() {
      this.form.processType = this.processType
      this.utils.loadShow()
      this.$ajax.post('/wm/stock_process/submitUp', this.form).then(resp => {
        if (resp.code == 0) {
          this.$notify.success(resp.msg)
          this.form.locationId = resp.data.locationId
          this.form.locationName = resp.data.locationName
          this.form.locationIdcode = resp.data.locationIdcode
          this.form.submitStatus = 1
        }
        this.utils.loadHide()
      })
    },

    //撤销提交
    handleUnSubmit() {
      this.$dialog.confirm({
        title: '系统提示',
        message: '确定取消标签拆分么',
      })
        .then(() => {
          this.form.processType = this.processType
          this.utils.loadShow()
          this.$ajax.post('/wm/stock_process/un_submit', this.form).then(resp => {
            if (resp.code == 0) {
              this.$notify.success('撤销成功')
              this.form.submitStatus = 0
              this.getStockProcessItem()
            }
            this.utils.loadHide()
          })
        })
        .catch(() => {
        })
    }
  },
  mounted() {
    this.$refs.scan.focus()
  }
}
</script>

<style lang="scss" scoped>
  .page-container{
    /deep/ .van-cell{
      .van-field__label{
        width: 40px;
      }
    }

    .cell-small-box  /deep/ .van-cell{
      padding:5px;
    }
  }

</style>
